<template>
  <div class="graph-page">
    <div id="graph-toolbar-cont">
      <graph-bar></graph-bar>
    </div>
    <div id="container" class="h-full" />
    <div>
      <topology-edit></topology-edit>
      <topology-line-edit></topology-line-edit>
    </div>
  </div>
</template>

<script setup lang="ts">
import { initGraph } from "./common/index";
import { graphDetailApi, queryDictApi } from "@/api/buildKg/tology";
import TopologyEdit from "@/views/buildKg/ontology/TopologyEdit.vue";
import GraphBar from "@/views/buildKg/ontology/GraphBar.vue";
import { emitter } from "@/utils/mitt";
import TopologyLineEdit from "@/views/buildKg/ontology/TopologyLineEdit.vue";
import { deelNode } from "./common/utils";
interface graphDataType {
  edge: Record<string, any>;
  nodes: Record<string, any>;
  modelInfo: {
    shape: string;
  };
}

let graphModule = {
  value: null,
};
let dataTypeList = ref([]);

onMounted(() => {
  initCanvans();
  initDict();
});
const initCanvans = async () => {
  let res = await graphDetailApi();
  if (res.code === 200) {
    let graphData = res.data as unknown as graphDataType;
    deelNode(graphData);

    const graph = initGraph(graphData);
    graphModule.value = graph;
    emitter.emit("graphInit", graph);
    emitter.emit("changeBarLayout", graphData.modelInfo.shape);
  }
};
const initDict = async () => {
  let params = {
    code: "nebula_data_type",
  };
  let { code, data } = await queryDictApi(params);
  if (code === 200) {
    dataTypeList.value = data;
  }
};
// layout
emitter.on("graphLayoutActive", (type) => {
  let graph = graphModule.value;
  let cfg: any = {
    type,
  };
  switch (type) {
    case "gForce":
      cfg = {
        type: "gForce",
        animate: true,
        preventOverlap: true,
        nodeSize: 40,
        linkDistance: 200,
        nodeSpacing: 20,
      };
      break;
    case "dagre":
      cfg = {
        type: "dagre",
        rankdir: "TB",
      };
      break;
    case "dagre-lr":
      cfg = {
        type: "dagre",
        rankdir: "LR",
      };
      break;
    case "grid":
      cfg = {
        type: "grid",
      };
      break;
    case "neural":
      cfg = {
        row: 3,
        type: "grid",
        sortBy: "tageName",
      };
      break;
    case "radial":
      cfg = {
        type: "radial",
        linkDistance: 300,
        strictRadial: true,
      };
      break;
  }
  graph.updateLayout(cfg);
});

provide("graphModule", graphModule);
provide("dataTypeList", dataTypeList);

onUnmounted(() => {
  emitter.off("graphLayoutActive");
});
</script>

<style lang="scss">
.graph-page {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

.graph-header {
  position: relative;
}

#container {
  position: relative;
  margin: 0;

  canvas {
    position: relative;
  }

  .g6-grid-container {
    z-index: 0 !important;
  }
}

.custom-menu-bar {
  padding: 8px 0;
  background: #fff;
  border: 1px solid #1010b5;
  box-shadow: 0 4px 16px 0 rgb(1 13 55 / 10%);
  opacity: 1;

  .line {
    width: 100%;
    height: 1px;
    background-color: #c7c9cf;
  }

  .disabel {
    color: #c7c9cf;
    pointer-events: none;
    cursor: not-allowed;
  }
}

#graph-toolbar-cont {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 50px;
  background-color: #fff;
}
</style>
